Bindings

Posted on 2023-02-04 by

Sometimes we want to set a variable from for example an input field.

Here we accomplish this by assigning myValue to the value of the input field and also set the value of the input field at the same time.

Since we have a variable that is used to set the input field value we can also have a button that sets myValue which will update the input field reflecting the new value .

value:

App.svelte

<script>
	let myValue = "";
	function onInput(event) {
		myValue = this.value;
	}
</script>

<input on:input={onInput} value={myValue} type="text" />

<button on:click={() => (myValue = "hello")}>Set myValue to "hello"</button>

<div>value: {myValue}</div>

This is a very common pattern so Svelte has a directive for it, the bind: directive.

We use it with bind: , then a property , then an equals sign and a variable we want to bind the property to.

Below we have bound value to the variable myValue so that whenever we update either the value or myValue the changes get reflected.

This is known as a two-way binding . Changing the property will update the variable , and changing the variable will update the property .

value:

Bind.svelte

<script>
	let myValue = "";
</script>

<input bind:value={myValue} type="text" />

<button on:click={() => (myValue = "hello")}>Set myValue to "hello"</button>

<div>value: {myValue}</div>

And yes, we can have a shorthand for it if the variable and property have the same name.

value:

BindShorthand.svelte

<script>
	let value = "";
</script>

<input bind:value type="text" />

<button on:click={() => (value = "hello")}>Set value to "hello"</button>

<div>value: {value}</div>

Before we used an event dispatcher to send a value to the parent of a child, like this:

count: 0

Parent.svelte

<script>
	let count;
	import Child from "./Child.svelte";
</script>

<Child
	on:countChange={(event) => {
		count = event.detail;
	}}
	{count} />

<button on:click={() => (count = 999)}>Set count to 999</button>

<style>
</style>

Child.svelte

<script>
	export let count = 0;
	import { createEventDispatcher } from "svelte";
	const dispatch = createEventDispatcher();
	$: dispatch("countChange", count);
</script>

count: {count}

<button on:click={() => count++}>Increment</button>

But we could also accomplish this by using bind: .

count: 0

ParentBind.svelte

<script>
	let count;
	import Child from "./Child.svelte";
</script>

<Child bind:count />

<button on:click={() => (count = 999)}>Set count to 999</button>

<style>
</style>

ChildBind.svelte

<script>
	export let count = 0;
</script>

count: {count}

<button on:click={() => count++}>Increment</button>